<template>
	<div class="message-container">
		<div class="messgae-box" v-if="!isMobile">
			<div class="message-list" id="messageList">
				<div class="message-cell" v-for="(msg, index) in messageList" :key="index"
					:class="{ 'user-self': msg.id == user.id }">
					<div class="message-name">{{ msg.userName || 'xxx' }}</div>
					<div class="message-bubble">{{ msg.content }}</div>
				</div>
			</div>
			<div class="message-input">
				<textarea v-model="messageText" ref="textarea" @keydown.enter="onEnter($event)"
					@keydown.ctrl.enter="onCtrlEnter" placeholder="输入聊天信息"></textarea>
				<el-button type="primary" size="mini" icon="el-icon-s-promotion" @click="sendMessage">发送
				</el-button>
			</div>
		</div>

		<div class="mobile-message" v-else>
			<div class="mobile-list" id="messageList">
				<div class="mobile-cell" v-for="(msg, index) in messageList" :key="index">
					<div class="mobile-name">{{ msg.userName || 'xxx' }}：</div>
					<div class="mobile-value">{{ msg.content }}</div>
				</div>
			</div>
			<div class="mobile-input">
				<input v-model="messageText" @keydown.enter="onEnter" placeholder="输入聊天信息" />
			</div>
		</div>

	</div>
</template>

<script>
import {
	sendMessage
} from '@/api/index.js'
import {
	useDateFormat
} from '@/utils/tools.js'
export default {
	props: {
		session: Object,
		user: Object,
		meetingRoomCode: String
	},
	data() {
		return {
			messageList: [],
			messageText: '',
			isCtrlEnter: false
		}
	},
	methods: {
		// 接收聊天消息
		getSignal(e) {
			let msg = JSON.parse(e.data)
			this.messageList.push(msg)
			this.$nextTick(() => {
				let dom = document.getElementById('messageList')
				dom.scrollTop = dom.scrollHeight
			})
		},
		onEnter(e) {
			e.preventDefault()
			setTimeout(() => {
				if (this.isCtrlEnter) { //如果为阻塞状态就反转状态
					this.isCtrlEnter = false
				} else { //如果不是就执行发送
					this.sendMessage()
				}
			}, 100)
		},
		onCtrlEnter(e) {
			let textDom = this.$refs.textarea
			var startPos = textDom.selectionStart
			var endPos = textDom.selectionEnd
			this.messageText = this.messageText.substring(0, startPos) + '\n' + this.messageText.substring(endPos, this
				.messageText.length)
			this.isCtrlEnter = true
		},
		// 发送聊天消息
		sendMessage() {
			if (this.messageText && this.messageText.trim()) {
				let time = new Date().getTime()
				let data = {
					createTime: useDateFormat(time),
					content: this.messageText,
					...this.user
				}
				this.session.signal({
					data: JSON.stringify(data), // 消息数据
					type: 'chat' // 消息类型
				})
					.then(() => {
						this.messageText = ''
					})
					.catch(error => {
						console.error(error);
					});
				sendMessage({
					meetingRoomCode: this.meetingRoomCode,
					type: 'chat',
					data
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.message-container {
	flex: 1;
	height: 0;
	display: flex;
	flex-direction: column;
}

.messgae-box {
	height: 100%;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	filter: invert(85%) hue-rotate(180deg);

	.message-list {
		height: 70%;
		padding: 10px 15px;
		overflow: auto;

		.message-cell {
			margin-bottom: 5px;
			display: flex;
			flex-direction: column;
		}

		.user-self {
			align-items: flex-end;
		}

		.message-name {
			color: grey;
			font-size: 12px;
		}

		.message-bubble {
			position: relative;
			width: fit-content;
			padding: 3px 10px;
			background: rgb(102, 177, 255);
			border-radius: 6px;
			font-size: 14px;
			white-space: pre;
		}
	}

	.message-input {
		height: 30%;
		padding: 10px 10px 40px;
		border-top: 1px solid gainsboro;
		text-align: right;

		textarea {
			width: 100%;
			height: 100%;
			border: 0;
			outline: 0;
			resize: none;
		}
	}
}

.mobile-message {
	position: fixed;
	bottom: 80px;
	left: 0;
	width: 100vw;
	padding: 0 10px;

	.mobile-list {
		height: 30vh;
		overflow: auto;
		display: flex;
		flex-direction: column-reverse;
	}

	.mobile-cell {
		margin-bottom: 5px;
		display: flex;
		align-items: center;
		color: #fff;
		font-size: 12px;
	}

	.mobile-name {
		margin-left: 3px;
	}

	.mobile-value {
		color: rgba(255, 255, 255, 0.5)
	}

	.mobile-input {
		width: 80%;
		background-color: rgba(0, 0, 0, 0.8);
		padding: 5px 10px;
		border-radius: 4px;

		input {
			width: 100%;
			background-color: transparent;
			border: 0;
			outline: 0;
			color: rgba(255, 255, 255, 0.8);
		}
	}
}

.mobile-list::-webkit-scrollbar {
	display: none;
	/* Chrome Safari */
}
</style>